<!DOCTYPE html>

<html>

<head>
    <title>计算机实验平台</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../CSS/bar_style.css">
    </link>
    <link rel="stylesheet" href="../CSS/page_style.css">
    </link>
    <link rel="stylesheet" href="../CSS/home_style.css">
    </link>
    <link rel="stylesheet" href="../CSS/footer.css">
    </link>
    <link rel="stylesheet" href="../CSS/experiment.css">
    </link>
    <link rel="stylesheet" href="../CSS/start_experiment.css">
    </link>
    <link rel="stylesheet" href="../CSS/learning_task.css">
    </link>
</head>

<body>
    <header>
        <div id="navigation_bar_on_the_page">
            <!-- 标题与导航内容分离 -->
            <nav>
                <div class="nav-container">
                    <!-- 标题 -->
                    <div id="name">
                        <h1>计算机实验平台</h1>
                    </div>
                    <!-- 导航项 -->
                    <ul class="nav-links">
                        <li><a href="#home">主页</a></li>
                        <li><a href="#experiment">实验</a></li>
                        <li><a href="https://losu.tech/index-new/">关于</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>
    <aside class="sidebar">
                    <nav>
                        <ul>
                            <!-- 一级菜单1 -->
                            <li class="menu-item">
                                <span>编译实验</span>
                                <ul class="sub-menu">
                                    <!-- 二级菜单 -->
                                    <li class="sub-item">
                                        <span>词法分析实验</span>
                                        <ul class="third-menu">
                                            <!-- 三级菜单 -->
                                            <li><a href="#learning_task_1">学习任务</a></li>
                                            <li><a href="#start_experiment_1">开始实验</a></li>
                                        </ul>
                                    </li>
                                    <li class="sub-item">
                                        <span>语法分析实验</span>
                                        <ul class="third-menu">
                                            <li><a href="#learning_task_2">学习任务</a></li>
                                            <li><a href="#start_experiment_2">开始实验</a></li>
                                        </ul>
                                    </li>
                                    <li class="sub-item">
                                        <span>中间代码生成实验</span>
                                        <ul class="third-menu">
                                            <li><a href="#learning_task_3">学习任务</a></li>
                                            <li><a href="#start_experiment_3">开始实验</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <!-- 一级菜单2 -->
                            <li class="menu-item">
                                <span>OS实验</span>
                                <ul class="sub-menu">
                                    <!-- 二级菜单 -->
                                    <li class="sub-item">
                                        <span>内存分配器</span>
                                        <ul class="third-menu">
                                            <li><a href="#learning_task_4">学习任务</a></li>
                                            <li><a href="#start_experiment_4">开始实验</a></li>
                                        </ul>
                                    </li>
                                    <li class="sub-item">
                                        <span>线程调度器</span>
                                        <ul class="third-menu">
                                            <li><a href="#learning_task_5">学习任务</a></li>
                                            <li><a href="#start_experiment_5">开始实验</a></li>
                                        </ul>
                                    </li>
                                    <li class="sub-item">
                                        <span>文件系统</span>
                                        <ul class="third-menu">
                                            <li><a href="#learning_task_6">学习任务</a></li>
                                            <li><a href="#start_experiment_6">开始实验</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </aside>
    <main class="page-content">
        <div id="home" class="area_of_display">

            <!-- 左上角卡片 -->
            <div class="display_card" style="--delay:0.1s">
                <div class="card_content">
                    <div class="card_icon">📁</div>
                    <h3 class="card_title">课程资源</h3>
                    <div class="card_text_markdown_render" id="card1"></div>
                </div>
            </div>

            <!-- 右上角卡片 -->
            <div class="display_card" style="--delay:0.2s">
                <div class="card_content">
                    <div class="card_icon">💻</div>
                    <h3 class="card_title">在线实验</h3>
                    <div class="card_text_markdown_render" id="card2"></div>
                </div>
            </div>

            <!-- 左下角卡片 -->
            <div class="display_card" style="--delay:0.3s">
                <div class="card_content">
                    <div class="card_icon">📊</div>
                    <h3 class="card_title">学习进度</h3>
                    <div class="card_text_markdown_render" id="card3"></div>
                </div>
            </div>

            <!-- 右下角卡片 -->
            <div class="display_card" style="--delay:0.4s">
                <div class="card_content">
                    <div class="card_icon">❓</div>
                    <h3 class="card_title">帮助中心</h3>
                    <div class="card_text_markdown_render" id="card4"></div>
                </div>
            </div>
        </div>
        
        <div id="experiment">
            <div class="experiment_container">
                
            </div>
        </div>


        <div id="start_experiment_1">
            <div id="c_code" class="experiment_card" style="--delay:0.1s">
                <div class="card_content">
                    <div class="card_icon">💻</div>
                    <h3 class="card_title">C代码编辑器</h3>
                    <p class="card_text">编写和编辑C语言代码</p>
                </div>
            </div>

            <div id="losu_code" class="experiment_card" style="--delay:0.2s">
                <div class="card_content">
                    <div class="card_icon">📁</div>
                    <h3 class="card_title">实验文件管理</h3>
                    <p class="card_text">上传和管理实验文件</p>
                </div>
            </div>

            <div id="code_result" class="experiment_card" style="--delay:0.3s">
                <div class="card_content">
                    <div class="card_icon">📊</div>
                    <h3 class="card_title">运行结果</h3>
                    <p class="card_text">查看代码执行结果和日志</p>
                </div>
            </div>

            <div id="code_input" class="experiment_card" style="--delay:0.4s">
                <div class="card_content">
                    <div class="card_icon">❓</div>
                    <h3 class="card_title">输入参数</h3>
                    <p class="card_text">设置代码运行时的输入参数</p>
                </div>
            </div>
        </div>

        <div id="start_experiment_2">
            <div id="c_code" class="experiment_card" style="--delay:0.1s">
                <div class="card_content">
                    <div class="card_icon">💻</div>
                    <h3 class="card_title">C代码编辑器</h3>
                    <p class="card_text">编写和编辑C语言代码</p>
                </div>
            </div>

            <div id="losu_code" class="experiment_card" style="--delay:0.2s">
                <div class="card_content">
                    <div class="card_icon">📁</div>
                    <h3 class="card_title">实验文件管理</h3>
                    <p class="card_text">上传和管理实验文件</p>
                </div>
            </div>

            <div id="code_result" class="experiment_card" style="--delay:0.3s">
                <div class="card_content">
                    <div class="card_icon">📊</div>
                    <h3 class="card_title">运行结果</h3>
                    <p class="card_text">查看代码执行结果和日志</p>
                </div>
            </div>

            <div id="code_input" class="experiment_card" style="--delay:0.4s">
                <div class="card_content">
                    <div class="card_icon">❓</div>
                    <h3 class="card_title">输入参数</h3>
                    <p class="card_text">设置代码运行时的输入参数</p>
                </div>
            </div>
        </div>

        <div id="start_experiment_3">
            <div id="c_code" class="experiment_card" style="--delay:0.1s">
                <div class="card_content">
                    <div class="card_icon">💻</div>
                    <h3 class="card_title">C代码编辑器</h3>
                    <p class="card_text">编写和编辑C语言代码</p>
                </div>
            </div>

            <div id="losu_code" class="experiment_card" style="--delay:0.2s">
                <div class="card_content">
                    <div class="card_icon">📁</div>
                    <h3 class="card_title">实验文件管理</h3>
                    <p class="card_text">上传和管理实验文件</p>
                </div>
            </div>

            <div id="code_result" class="experiment_card" style="--delay:0.3s">
                <div class="card_content">
                    <div class="card_icon">📊</div>
                    <h3 class="card_title">运行结果</h3>
                    <p class="card_text">查看代码执行结果和日志</p>
                </div>
            </div>

            <div id="code_input" class="experiment_card" style="--delay:0.4s">
                <div class="card_content">
                    <div class="card_icon">❓</div>
                    <h3 class="card_title">输入参数</h3>
                    <p class="card_text">设置代码运行时的输入参数</p>
                </div>
            </div>
        </div>

        <div id="start_experiment_4">
            <div id="c_code" class="experiment_card" style="--delay:0.1s">
                <div class="card_content">
                    <div class="card_icon">💻</div>
                    <h3 class="card_title">C代码编辑器</h3>
                    <p class="card_text">编写和编辑C语言代码</p>
                </div>
            </div>

            <div id="losu_code" class="experiment_card" style="--delay:0.2s">
                <div class="card_content">
                    <div class="card_icon">📁</div>
                    <h3 class="card_title">实验文件管理</h3>
                    <p class="card_text">上传和管理实验文件</p>
                </div>
            </div>

            <div id="code_result" class="experiment_card" style="--delay:0.3s">
                <div class="card_content">
                    <div class="card_icon">📊</div>
                    <h3 class="card_title">运行结果</h3>
                    <p class="card_text">查看代码执行结果和日志</p>
                </div>
            </div>

            <div id="code_input" class="experiment_card" style="--delay:0.4s">
                <div class="card_content">
                    <div class="card_icon">❓</div>
                    <h3 class="card_title">输入参数</h3>
                    <p class="card_text">设置代码运行时的输入参数</p>
                </div>
            </div>
        </div>

        <div id="start_experiment_5">
            <div id="c_code" class="experiment_card" style="--delay:0.1s">
                <div class="card_content">
                    <div class="card_icon">💻</div>
                    <h3 class="card_title">C代码编辑器</h3>
                    <p class="card_text">编写和编辑C语言代码</p>
                </div>
            </div>

            <div id="losu_code" class="experiment_card" style="--delay:0.2s">
                <div class="card_content">
                    <div class="card_icon">📁</div>
                    <h3 class="card_title">实验文件管理</h3>
                    <p class="card_text">上传和管理实验文件</p>
                </div>
            </div>

            <div id="code_result" class="experiment_card" style="--delay:0.3s">
                <div class="card_content">
                    <div class="card_icon">📊</div>
                    <h3 class="card_title">运行结果</h3>
                    <p class="card_text">查看代码执行结果和日志</p>
                </div>
            </div>

            <div id="code_input" class="experiment_card" style="--delay:0.4s">
                <div class="card_content">
                    <div class="card_icon">❓</div>
                    <h3 class="card_title">输入参数</h3>
                    <p class="card_text">设置代码运行时的输入参数</p>
                </div>
            </div>
        </div>

        <div id="start_experiment_6">
            <div id="c_code" class="experiment_card" style="--delay:0.1s">
                <div class="card_content">
                    <div class="card_icon">💻</div>
                    <h3 class="card_title">C代码编辑器</h3>
                    <p class="card_text">编写和编辑C语言代码</p>
                </div>
            </div>

            <div id="losu_code" class="experiment_card" style="--delay:0.2s">
                <div class="card_content">
                    <div class="card_icon">📁</div>
                    <h3 class="card_title">实验文件管理</h3>
                    <p class="card_text">上传和管理实验文件</p>
                </div>
            </div>

            <div id="code_result" class="experiment_card" style="--delay:0.3s">
                <div class="card_content">
                    <div class="card_icon">📊</div>
                    <h3 class="card_title">运行结果</h3>
                    <p class="card_text">查看代码执行结果和日志</p>
                </div>
            </div>

            <div id="code_input" class="experiment_card" style="--delay:0.4s">
                <div class="card_content">
                    <div class="card_icon">❓</div>
                    <h3 class="card_title">输入参数</h3>
                    <p class="card_text">设置代码运行时的输入参数</p>
                </div>
            </div>
        </div>

        <div id="learning_task_1">

        </div>

        <div id="learning_task_2">

        </div>

        <div id="learning_task_3">

        </div>

        <div id="learning_task_4">

        </div>


        <div id="learning_task_5">

        </div>

        <div id="learning_task_6">

        </div>

    </main>

    <footer class="footer">
        <p> © 2025 计算机实验平台 | 保留所有权利</p>
    </footer>
</body>

<script src="../js/script.js"></script>
<!-- 推荐使用明确版本号的链接 -->
<script src="https://cdn.jsdelivr.net/npm/marked@14.1.2/marked.min.js"></script>
<script src="../js/markdowm.js"></script>
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- <script >
    const markdownText = "# Hello, Marked!";
     const html = marked.parse(markdownText); // v5+ 写法
    document.getElementById("card1").innerHTML = html;
</script>> -->

</html>